<!--  -->
<template>
    <div>
        <Card>
            <p slot="title">
                <Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
                巡检模板
            </p>
            <Button v-if="btnp.xtgl_xjpzhi_ck" @click="getNoInspections"  slot="extra" size="small" class="zh-hollow" type="primary" >添加模板</Button>
            <Table no-data-text="尚未添加巡检模板" :loading="temp_loading" :columns="xjtempColumns" :data="xjtempData" border></Table>
            <Page :current.sync="temp_pageNumber"  :total="temp_total" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <Modal :loading="addTemploading" title="添加模板" v-model="modal_add_temp" :mask-closable="false" @on-ok="addTemp" ok-text="保存" cancel-text="放弃操作">
            <div style="padding:15px 30px">
                <Table @on-selection-change="handleSelectChange" :columns="modalTempColumns" :data="modalTempData" border></Table>
                <Page :current.sync="temp_no_pageNumber" :page-size="temp_no_pageSize" :total="temp_no_total" show-total  @on-change="pageNoChange" ></Page>        
                <p>{{tip}}</p>
            </div>
        </Modal>
        <Modal :title="tempD.title" v-model="modal_temp" class="no_footer_modal">
            <Tabs type="card">
                <TabPane v-for="(item,index) in tempD.tablabel" :key="index" :label="item.name" style="padding:15px 30px;">
                    
                        <div v-if="item.name!='意见与建议'" class="tempList-item" v-for="(child,num) in item.children" :key="num">
                            <p style="marginBottom:10px;">{{child.name}}</p>
                            <p  style="marginBottom:10px;" v-if="!!child.normal">{{child.normal}}</p>
                            <RadioGroup style="marginBottom:10px;"  type="button">
                                <Radio :label="child.good_text"></Radio>
                                <Radio :label="child.bad_text"></Radio>
                            </RadioGroup>
                            <Input readonly :placeholder="child.prompt"></Input>
                        </div>                       
                        <div v-else style="background:#eee">
                            <Card>
                                <div style="minHeight:250px;"></div>
                            </Card>
                        </div>
        
                </TabPane>
                
            </Tabs>
        </Modal>
    </div>
</template>

<script>
import util from '@/libs/util.js'
import {getTempDetails} from '@/libs/get.js'
import {getInspTable,getNoInspTable,deleteInspTemp,saveInspTemp} from '@/libs/system.js'
export default {
name:'',
    data () {
        return {
            btnp:{},
            btn:{
                xtgl_xjpzhi_tjmb:false,
                xtgl_xjpzhi_ck:false,
                xtgl_xjpzhi_yc:false
            },
            addTemploading:true,
            userUuid:'',
            user_type:'',
            tip:'已选：0个',
            checked:[],
            temp_no_pageNumber:1,
            temp_no_pageSize:8,
            temp_no_total:0,
            temp_loading:true,
            temp_total:0,
            temp_pageNumber:1,
            temp_pageSize:10,
            modal_temp:false,
            tempD:{},
            modalTempData:[],
            modalTempColumns:[
                {
                    type:'selection',
                    width:60,
                    align:'center',
                    title:'选择'
                },{
                    key:'name',
                    align:'center',
                    title:'模板名称'
                },{
                    key:'action',
                    title:'操作',
                    width:80,
                    render:(h,params)=>{
                        return h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0'
                                },
                                on:{
                                    click:()=>{
                                    this.viewTemp(params.row.uuid)
                                        
                                    }
                                }
                            },'查看')
                    }

                }
            ],
            modal_add_temp:false,
            xjtempColumns:[
                {
                    key:'name',
                    title:'模板名称',
                    align:'center'
                },
                {
                    key:'action',
                    title:'操作',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',[
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.xtgl_xjpzhi_ck?'inline-block':'none'
                                },
                                on:{
                                    click:()=>{
                                        this.viewTemp(params.row.uuid)
                                        
                                    }
                                }
                            },'查看'),
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.xtgl_xjpzhi_sc?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                    let config={
                                    title:'移除模板',
                                    content:'模板移除后，可重新从模板库中添加。移除模板不会影响已产生的巡检任务。',
                                    render:h=>{
                                        return h('div',{
                                            style:{
                                                padding:'30px 30px 0'
                                            }
                                        },[
                                            h('p','模板移除后，可重新从模板库中添加。'),
                                            h('p','移除模板不会影响已产生的巡检任务。')
                                        ])
                                    },
                                    okText:'移除',
                                    cancelText:'放弃操作',
                                    onOk:()=>{
                                        this.deleteTemp(params.row.kopuuid)
                                    }
                                    }
                                    this.$Modal.confirm(config)
                                }
                                }
                            },'移除'),
                        ])
                    }
                }
            ],
            xjtempData:[],
        };
    },
    methods:{
        async getInspections(){
                this.temp_loading=true;
                let res= await getInspTable(this.temp_pageNumber,this.temp_pageSize);
                let response=res.data;
                if(response.code==200){
                    this.temp_total=response.data.total;
                    this.xjtempData=response.data.rows;
                    this.temp_loading=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }  
            },
            pageChange(number){
                this.temp_pageNumber=number;
                this.getInspections();
            },
            pageSizeChange(size){
                this.temp_pageNumber=1;
                this.temp_pageSize=size;
                this.getInspections();
            },
            async getNoInspections(){
                let res= await getNoInspTable(this.userUuid,this.temp_no_pageNumber,this.temp_no_pageSize);
                let response=res.data;
                if(response.code==200){
                    this.temp_no_total=response.data.total;
                    this.modalTempData=response.data.rows;
                    this.modal_add_temp=true;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }  
            },
            pageNoChange(number){
                this.temp_no_pageNumber=number;
                this.getNoInspections();
            },
            async addTemp(){
                if(this.checked.length<=0){
                    this.$Notice.error({
                        desc:'未选择模板'
                    })
                }else{
                    let inspection_name=this.checked.map(item=>{
                        return item.uuid
                    }).join(',');
                    let res= await saveInspTemp(this.userUuid,inspection_name);
                    let response=res.data;
                    if(response.code==200){
                        this.$Notice.success({
                            desc:'已保存'
                        });
                        this.temp_pageNumber=1;
                        this.getInspections();
                        this.modal_add_temp=false;
                    }else{
                        this.$Notice.error({
                            desc:response.msg
                        })
                    }
                }
                let that=this;
                this.addTemploading=false;
                setTimeout(()=>{
                    that.addTemploading=true;
                },500)
                
            },
            async deleteTemp(uuid){
                let res= await deleteInspTemp(uuid);
                let response=res.data;
                if(response.code==200){
                    this.$Notice.success({
                        desc:'已删除'
                    });
                    this.temp_pageNumber=1;
                    this.getInspections();
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            },
            handleSelectChange(selection){
                let otherSelection=selection.filter(item=>{
                    if(!this.checked.map(item=>{return item.uuid}).includes(item.uuid)){
                        return item
                    }
                });
                this.checked=[...this.checked,...otherSelection];
                let checkeduuid=selection.map(item=>{
                    return item.uuid
                });
                let nochecked=this.modalTempData.filter(item=>{
                    if(!checkeduuid.includes(item.uuid)){
                        return item
                    }
                });
                let nocheckeduuids=nochecked.map(item=>{
                    return item.uuid
                })
                this.checked=this.checked.filter(item=>{
                    if(!nocheckeduuids.includes(item.uuid)){
                        return item
                    }
                })
                if(this.checked.length==0){
                    this.tip="已选：0个"
                }else if(this.checked.length>2){
                    this.tip=`已选：${this.checked[0].name}、${this.checked[1].name}等${this.checked.length}个模板`
                }else{
                    this.tip=`已选${this.checked.length}个模板：`+this.checked.map(item=>{
                        return item.name
                    }).join('，')
                }
            },
            async viewTemp(uuid){
                let res=await getTempDetails(uuid);
                let response=res.data;
                if(response.code===200){
                    this.modal_temp=true;
                    this.tempD=response.data;
                    this.tempD.tablabel.push({name:'意见与建议'})
                }else{
                    this.$Notice.error({
                    desc:response.msg
                    });
                }
            },
    },
    watch:{
        modal_add_temp:function(){
            if(!this.modal_add_temp){
                this.tip='已选：0个';
                this.checked=[];
                this.temp_no_pageNumber=1;
            }
        }
    },
    created(){
        util.isCustomer(this);
        this.getInspections();
        this.btnp=util.bpower(this,this.btn);
    }
}

</script>
<style lang='scss' >
</style>